<!-- 
 * 科技政策管理
 * @author: 
 * @since: 2022-06-08
 * index.vue
-->
<template>
  <div class="scienceTechnology-container h100">
    <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
    <div v-show="routerCutLevel === 2" class="listPage">
      <div class="search">
        <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
      </div>
      <div class="table">
        <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="comEvent" @refresh="getPolicyList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="336" @colSelect="colSelect">
          <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
        </TableCom>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { sessionstorage } from '@/utils/storage.js'
import { successHandle, colFilters, tableIsEnable, batchHandle } from '@/utils/common.js'
import { getPolicyListApi, policyBatchApi } from '@/api/interface/policy.js'
import { getDictItemListApi } from '@/api/interface/dict.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();
const store = useStore();

//区域加载
const loading = ref(true)

//科研机构模块功能按钮
const btnList = reactive([
  {
    name: '新增政策',
    bgColor: '#25D390'
  },
  // {
  //   name: '政策导入',
  //   bgColor: '#00A2FF'
  // },
  {
    name: '批量启用',
    bgColor: '#00A2FF'
  },
  {
    name: '批量禁用',
    bgColor: '#FFB018'
  },
  {
    name: '批量删除',
    bgColor: '#F74B33'
  },


])


const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel']
})

const state = reactive({
  formModel: {//科技政策搜索列表的参数
    keyword: '',//政策标题
    source: '',//发文部门
    time: '',
    startDate: '',//发布开始日期
    endDate: '',//发布结束日期
    sendPortId: '',//发文端口
    isHot: '',//是否热门
    isRecommend: '',//是否推荐
    valid: '',//是否启用
  },
  formLabel: [
    {
      label: '政策标题',
      model: "keyword",
      type: "text",
      width: '160',
      placeholder: '请输入政策标题',
    },
    {
      label: '发文部门',
      model: "source",
      type: "text",
      width: '160',
      placeholder: '请输入发文部门',
    },
    {
      label: '发布日期',
      model: "time",
      type: "dateRange",
      width: '360',
      option: [],
    },
    {
      label: '发文端口',
      model: "sendPortId",
      type: "select",
      width: '160',
      option: [],
      placeholder: '请输入发文端口',
    },
    {
      label: '是否启用',
      model: "valid",
      type: "select",
      width: '160',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '启用',
          value: true
        },
        {
          key: '禁用',
          value: false
        },
      ],
    },
    {
      label: '是否热门',
      model: "isHot",
      type: "select",
      width: '160',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '是',
          value: true
        },
        {
          key: '否',
          value: false
        },
      ],
    },
    {
      label: '是否推荐',
      model: "isRecommend",
      type: "select",
      width: '160',
      option: [
        {
          key: '全部',
          value: ''
        },
        {
          key: '是',
          value: true
        },
        {
          key: '否',
          value: false
        },
      ],
    },

  ],
  tableData: [],
  tableHeader: [
    {
      label: '政策标题',
      prop: "title",
      isLink: true,
      function: 'detail',
    },
    {
      label: '发文部门',
      prop: "source",
    },
    {
      label: '发文端口',
      prop: "sendPortName",
    },
    {
      label: '发布日期',
      prop: "publishDate",
    },
    {
      label: '阅读次数',
      prop: "readCount",
    },

  ],
  btnData: [
    {
      name: '编辑',
      color: '#25D390',
      change: 'edit'
    },
    {
      name: '删除',
      color: '#F74B33',
      change: 'del'
    },
    {
      name: '是否启用',
      isStart: true,
      prop: 'valid',
      change: 'enable'
    },
    {
      name: '是否热门',
      isStart: true,
      prop: 'isHot',
      change: 'hot'
    },
    {
      name: '是否推荐',
      isStart: true,
      prop: 'isRecommend',
      change: 'recommend'
    },

  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  selectTableId: [],//选择表格数据
})

onMounted(() => {
  getDictItemList()
  getPolicyList()
})

//获取发文端口数据
const getDictItemList = () => {
  const params = {
    ipi: 1,
    ips: 100,
    dictType: 'DICT_SEND_PORT'
  }
  getDictItemListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[3].option = data.result.map(item => ({
        ...item,
        key: item.keyName,
        value: item.keyId
      }))
    }

  })

}
//获取科技政策列表
const getPolicyList = () => {
  loading.value = true
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    keyword: state.formModel.keyword,//政策标题
    source: state.formModel.source,//发文部门
    startDate: state.formModel.startDate,//开始日期
    endDate: state.formModel.endDate,//结束日期
    sendPortId: state.formModel.sendPortId,//发文端口
    isHot: state.formModel.isHot,//是否热门
    isRecommend: state.formModel.isRecommend,//是否推荐
    valid: state.formModel.valid,//是否启用
    orderType: 'desc',//倒序
    orderField: 'publishDate',//按创建时间排序
  }
  getPolicyListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
    }

  })

}

//点击科技政策操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://新增科技政策
      router.push({ name: 'PolicyAdd' }).catch(() => { });
      break;
    case 1://批量导入
      break;
    case 2://批量启用
      batchHandle(state.selectTableId, 'START', () => {
        policyBatch('START')
      })
      break;
    case 3://批量禁用
      batchHandle(state.selectTableId, 'STOP', () => {
        policyBatch('STOP')
      })
      break;
    case 4://批量删除
      batchHandle(state.selectTableId, 'DEL', () => {
        policyBatch('DEL')
      })
      break;

  }
}

//科技政策批量操作
const policyBatch = (type) => {
  const params = {
    batchType: type,
    ids: state.selectTableId
  }
  policyBatchApi(params).then(res => {
    successHandle(res)
    getPolicyList()
  })
}
//搜索
const filter = () => {
  const [start, end] = state.formModel.time
  state.formModel.startDate = start
  state.formModel.endDate = end
  getPolicyList()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getPolicyList()
}
//表格中的操作
const comEvent = (type, data) => {
  switch (type) {
    case 'edit'://编辑
      sessionstorage.set('policyItem', data)
      router.push({ name: 'PolicyEdit' }).catch(() => { });
      break;
    case 'del'://删除
      tableIsEnable(state.tableData, 'del', data, (newArr) => {
        state.selectTableId = newArr
        policyBatch('DEL')
      })
      break;
    case 'enable'://是否启用
      tableIsEnable(state.tableData, 'valid', data, (newArr) => {
        state.selectTableId = newArr
        !(data.valid) ? policyBatch('START') : policyBatch('STOP')
      })
      break;
    case 'hot'://是否热门
      tableIsEnable(state.tableData, 'isHot', data, (newArr) => {
        state.selectTableId = newArr
        !(data.isHot) ? policyBatch('START_HOT') : policyBatch('STOP_HOT')
      })
      break;
    case 'recommend'://是否推荐
      tableIsEnable(state.tableData, 'isRecommend', data, (newArr) => {
        state.selectTableId = newArr
        !(data.isRecommend) ? policyBatch('START_RECOMMENDED') : policyBatch('STOP_RECOMMENDED')
      })
      break;
    case 'detail'://详情
      sessionstorage.set('policyItem', data)
      router.push({ name: 'PolicyDetail' }).catch(() => { })
      break;

  }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//选择表格数据
const getSelectChange = (row) => {
  state.selectTableId = row.map(item => item.id)
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getPolicyList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getPolicyList()
}


</script>

<style lang="scss" scoped>
</style>
